<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平间隔 */
        }
        .flex-item {
            margin: 5px; /* 设置元素之间的间隔为5px */
        }

        table {
            border-collapse: separate;
            border-spacing: 0; /* 移除表格单元格之间的默认间隔 */
        }
        td {
            padding: 5px; /* 设置单元格内间隔 */
            border: 1px solid black; /* 为单元格添加边框，以便看到内间隔效果 */
        }
        .centered {
            text-align: center;
        }
    </style>
    <meta charset="UTF-8">
    <title>订单确认页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <form action="/order/submit" method="post">
    <div class="row">
        <table class="table table-hover">
            <thead>
            <div class="flex-container">
                <tr class="success">
<!--                    <th>编号</th>-->
                    <th>姓名</th>
                    <th>手机号</th>
                    <th>地址</th>
                    <th>项目图片</th>
                    <th>项目名称</th>
                    <th>项目金额</th>
                    <th>服务时长</th>
                    <th>服务人员</th>
<!--                    <th>服务时间</th>-->
                    <th>打车费</th>
<!--                    <th>优惠券</th>-->
                    <th>项目金额</th>
<!--                    <th>打赏</th>-->
<!--                    <th>备注</th>-->
<!--                    <th>交通费说明</th>-->
                </tr>
            </div>
            </thead>

            数据显示
            <tr th:each="order:${orderVo}">
                <!--                <td><input type="checkbox" name="ids" th:value="${address.id}" ></td>-->
<!--                <td th:text="${teacher.id}" th:id="${teacher.id}"></td>-->
                <td th:text="${order.name}"></td>
                <td th:text="${order.phone}"></td>
                <td th:text="${order.address}"></td>
                <td th:text="${order.image}"></td>
                <td th:text="${order.projectName}"></td>
                <td th:text="${order.projectPrice}"></td>
                <td th:text="${order.duration}"></td>
                <td th:text="${order.teacherName}"></td>
                <td th:text="${order.taxiPrice}"></td>
                <td th:text="${order.projectPrice}"></td>
                <br/>
                *打赏金额:<input type="text" name="rewardPrice" placeholder="0.00">元
                *备注:<input type="text" name="rework" placeholder="请填写备注">
                交通费说明:  交通出行收取来回车费,数据来源于网约车平台,可能与技师实际车费有出入
                <input type="hidden" name="pid" th:value="${order.pid}"/>
                <input type="hidden" name="tid" th:value="${order.tid}"/>
                <p>需支付: <span th:text="${order.totalAmount}"></span></p>
            </tr>
            *服务时间:
            <select name="serviceTime">
                <option value="">请选择时间段...</option>
                <option th:each="serviceTime : ${intervals}"
                        th:value="${serviceTime}"
                        th:text="${serviceTime}">
                </option>
            </select>
            <td><input type="submit" name="立即约单"/></td>
        </table>
    </div>
    </form>

    //    优惠券   项目金额
</head>


<script type="text/javascript">

    // 获取省份数据的函数
    function getTimeIntervals() {
        fetch("http://localhost:18080/order/getTimeIntervals")
            .then(response => response.json())
            .then(data => {
                const timePeriodSelect = document.getElementById('timePeriods');
                data.forEach(timePeriods => {
                    const option = document.createElement('timePeriods');
                     option.value = timePeriods.id;
                     option.text = timePeriods.text;
                    timePeriodSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('获取省份数据时出错：', error);
            });
    }

    // 页面加载时获取省份数据
    // window.onload = getTimeIntervals;
</script>